<template>
	<view class="container">
		<view class="content">
			<header-view></header-view>
			<view class="title flex_between">
				<view class="symbol">BTCUSD</view>
				<view class="price" :class="1==1?'up':'down'">{{sell_price}}</view>
			</view>
			<view class="nav flex">
				<view class="nav_item flex_center" :class="current==1?'active_nav':''" @tap="changeNav(1)">市价</view>
				<view class="nav_item flex_center" :class="current==2?'active_nav':''" @tap="changeNav(2)">挂单</view>
				<view class="nav_bg" :class="current==1?'nav_left':'nav_right'"></view>
			</view>
			<view class="sort" v-if="current == 2">
				<view class="sort_title">
					<text class="text">价格</text>
					<text class="tip">(<= {{sell_price}})</text>
				</view>
				<view class="sort_content">
					<u-number-box step="0.00001" decimal-length="5" v-model="inputPrice" :min="0"></u-number-box>
				</view>
			</view>
			<view class="sort">
				<view class="sort_title">
					<text class="text">手数</text>
					<text class="tip">({{set.product_num_min}} ~ {{set.product_num_max}})</text>
				</view>
				<view class="sort_content">
					<u-number-box step="0.01" decimal-length="2" v-model="number" :min="0.01"></u-number-box>
				</view>
			</view>
			<view class="sort">
				<view class="sort_title">
					<text class="text">止损</text>
				</view>
				<view class="sort_content">
					<u-number-box step="0.00001" decimal-length="5" v-model="zhisun" :min="0"
						@change="handleNumberBoxChange"></u-number-box>
				</view>
			</view>
			<view class="sort">
				<view class="sort_title">
					<text class="text">止盈</text>
				</view>
				<view class="sort_content">
					<u-number-box step="0.00001" decimal-length="5" v-model="zhiying" :min="0"
						@change="handleNumberBoxChangeTwo"></u-number-box>
				</view>
			</view>
			<view class="detail_list">
				<!-- 				<view class="detail_item">
					<view class="item_title">倍数</view>
					<view class="item_data">{{beishu}}×</view>
				</view> -->
				<view class="detail_item" v-if="type == '2'">
					<view class="item_title">保证金</view>
					<view class="item_data">{{calculatedMargin}}</view>
				</view>
				<view class="detail_item">
					<view class="item_title">余额</view>
					<view class="item_data">{{yue}}</view>
				</view>
				<!-- 				<view class="detail_item">
					<view class="item_title">交易后预付款比</view>
					<view class="item_data">{{ yfkb.toFixed(6) }}</view>
				</view> -->
			</view>
			<view class="btns flex_between">
				<button class="btn bg_up" @tap="tosell" v-if="type == '2'">卖出</button>
				<button class="btn bg_down" @tap="tosell" v-if="type == '1'">买入</button>
			</view>
		</view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView.vue"
	import {
		stockDetailApi,
		addOrderApi,
		getSettingApi,
		userInfoApi,
	} from '@/api/api.js'
	export default {
		components: {
			headerView
		},
		data() {
			return {
				isFirstClickTwo: true,
				isFirstClick: true, // 标志位，判断是否是第一次点击
				sell_price: '',
				current: 1,
				number: 0.01, //手数
				zhisun: 0,
				zhiying: 0,
				type: '',
				id: '',
				inputPrice: '',
				set: {},
				beishu: 400,
				yue: '',
				timer: null,
				isFirstRequest: true,
			}
		},
		onLoad(options) {
			this.type = options.type;
			this.id = options.id;
			this.requestStockDetail();
			this.getSetting()
			this.getUserInfo()
			// 其他逻辑
		},
		onShow() {
			this.timer = setInterval(() => {
				this.requestStockDetail()
			}, 1000 * 10)
		},
		onHide() {
			clearInterval(this.timer)
		},
		onUnload() {
			clearInterval(this.timer)
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		computed: {
			calculatedMargin() {
				return this.sell_price * this.set.credit_rate;
			},
			yfkb() {
				// console.log(this.price)
				return this.sell_price * this.beishu
			}
		},
		methods: {
			// 设置标志位
			handleNumberBoxChange(value) {
				if (this.isFirstClick) {
					// 第一次点击，根据 this.current 的值选择是否替换为 this.inputPrice
					if (this.current == 2) {
						this.zhisun = parseFloat(this.inputPrice);
					} else {
						this.zhisun = parseFloat(this.sell_price);
					}
					this.isFirstClick = false;
					this.$nextTick(() => {
						if (this.current == 2) {
							this.zhisun = parseFloat(this.inputPrice);
						} else {
							this.zhisun = parseFloat(this.sell_price);
						}
					});
				} else {
					// 后续点击，按步长加减
					this.zhisun = value;
				}
			},

			handleNumberBoxChangeTwo(value) {
				if (this.isFirstClickTwo) {
					// 第一次点击，根据 this.current 的值选择是否替换为 this.inputPrice
					if (this.current == 2) {
						this.zhiying = parseFloat(this.inputPrice);
					} else {
						this.zhiying = parseFloat(this.sell_price);
					}
					this.isFirstClickTwo = false;
					this.$nextTick(() => {
						if (this.current == 2) {
							this.zhiying = parseFloat(this.inputPrice);
						} else {
							this.zhiying = parseFloat(this.sell_price);
						}
					});
				} else {
					// 后续点击，按步长加减
					this.zhiying = value;
				}
			},

			// 获取个人信息
			getUserInfo() {
				const token = uni.getStorageSync('token')
				userInfoApi({
					token
				}).then(res => {
					this.yue = res.data.data.price
				})
			},
			// 获取配置
			getSetting() {
				getSettingApi().then(res => {
					this.set = res.data.data
				})
			},
			// 请求商品详情
			requestStockDetail() {
				const token = uni.getStorageSync('token')
				const id = this.id
				stockDetailApi({
					token,
					id
				}).then(res => {
					this.sell_price = res.data.data.sell_price
					if (this.isFirstRequest) {
						this.inputPrice = this.sell_price
						this.isFirstRequest = false;
					}
				})
			},
			changeNav(key) {
				if (key == this.current) return;
				this.current = key;
				console.log(this.current);
				this.zhisun = 0;
				this.zhiying = 0;
				this.isFirstRequest = true;
				this.isFirstClickTwo = true; // 修改这一行，将冒号替换为等号
				this.isFirstClick = true;
				this.requestStockDetail();
			},
			tosell() {
				const token = uni.getStorageSync('token');
				const pro_id = this.id;
				const type = this.type;
				const limit_type = this.current;
				const num = this.number;
				const s_l = this.zhisun;
				const t_p = this.zhiying;
				let price = this.sell_price; // 使用保存的价格信息
				if (this.current == 2) {
					price = this.inputPrice;
				}
				if (price > this.sell_price) {
					uni.showToast({
						title: '价格填写有误',
						icon: 'none', // 使用'none'表示不显示图标
						duration: 1000 // 提示持续时间，单位为毫秒
					});
					return
				}
				if (num > 500) {
					uni.showToast({
						title: '手数填写有误',
						icon: 'none', // 使用'none'表示不显示图标
						duration: 1000 // 提示持续时间，单位为毫秒
					});
					return
				}

				// 调用买入卖出接口
				addOrderApi({
					token,
					pro_id,
					type,
					limit_type,
					num,
					s_l,
					t_p,
					price
				}).then(response => {
					// 处理成功的逻辑
					uni.showToast({
						title: response.data.msg,
						icon: 'none', // 使用'none'表示不显示图标
						duration: 1000 // 提示持续时间，单位为毫秒
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;

		.title {
			margin-top: 40rpx;
			align-items: baseline;
			font-family: PM;

			.symbol {
				font-size: 40rpx;
				margin-right: 10rpx;
			}

			.price {
				font-size: 60rpx;
			}
		}

		.nav {
			height: 100rpx;
			line-height: 100rpx;
			background-color: rgba(237, 237, 237, .46);
			border-radius: 40rpx;
			overflow: hidden;
			position: relative;
			font-size: 32rpx;
			margin-top: 20rpx;

			.nav_item {
				flex: 1;
				position: relative;
				z-index: 10;
				opacity: .3;
				transition: all .3s ease;
			}

			.nav_bg {
				position: absolute;
				top: 6rpx;
				background-image: url("../../static/img/page_bg.png");
				background-size: cover;
				z-index: 1;
				border-radius: 40rpx;
				width: calc(50% - 6rpx);
				height: calc(100% - 12rpx);
				z-index: 9;
				transition: all .3s ease;
			}

			.nav_left {
				left: 6rpx;
			}

			.nav_right {
				left: 50%;
			}

			.active_nav {
				color: #0065ff;
				opacity: 1;
			}
		}

		.sort {
			margin-top: 40rpx;

			.sort_title {
				font-family: PM;

				.text {
					font-size: 32rpx;
				}

				.tip {
					opacity: .5;
					margin-left: 18rpx;
				}
			}

			.sort_content {
				margin-top: 30rpx;
			}
		}

		.detail_list {
			margin-top: 10rpx;
			font-family: PM;

			.detail_item {
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				margin-top: 30rpx;

				.item_title {
					opacity: .5;
				}

				.item_data {
					font-size: 36rpx;
				}
			}
		}

		.btns {
			margin-top: 100rpx;
			column-gap: 40rpx;
			font-size: 42rpx;

			.btn {
				flex: 1;
				border-radius: 30rpx;
				padding: 20rpx 0;
			}
		}

		/deep/uni-button {
			font-size: 42rpx;
			line-height: 58rpx;
		}

	}

	/deep/.u-number-box__plus,
	/deep/.u-number-box__minus {
		width: 100rpx;
		height: 100rpx !important;
		border-radius: 20rpx;
		background-color: hsla(0, 0%, 92.9%, .46) !important;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/deep/.u-number-box__input {
		width: auto;
		flex: 1;
		height: 100rpx !important;
		border-radius: 20rpx;
		background-color: hsla(0, 0%, 92.9%, .46) !important;
		margin: 0 12rpx;
		font-family: PM;
	}
</style>